<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽连线</title>
    <link rel="stylesheet" type="text/css" href="css/dragline.css">
    <script type="text/javascript" src="js/jquery-3.2.0.min.js"></script>
    <script type="text/javascript" src="js/dragline.js"></script>
    <style type="text/css">
    html,body{
        width: 100%;
        height: 100%
        ;margin:0;
    }
    .form{
        width: 20%;
        height: 50px;
        margin: 20px;
        position: absolute;
        left: -40px;
        top: 50px;
        text-align: right;
        z-index: 10;
    }
    .form input[type="checkbox"]{
        margin-left: 50px;
    }
    .btns{
        width: 100%;
        text-align: center;
        margin:10px auto;
    }
    .btns button{
        cursor:pointer;
    }
    </style>
</head>
<body>
    <div class="form" style="display: none;">
        <input type="checkbox" name="family" value="1" checked />关系1
        <br/>
        <input type="checkbox" name="friend" value="2" checked />关系2
        <br/>
        <input type="checkbox" name="airport" value="3" checked />关系3
        <br/><br/>
        <input type="text" name="min" style="margin-left:100px;width:30px;" value="0" /> —— <input type="text" name="max" style="width:30px;" value="100">
        <button>筛选</button>
    </div>
    <div class="btns">
        <button onclick="show_pic(1);">单一指向关系图</button>
        <button onclick="show_pic(2);">随机分布图</button>
        <button onclick="show_pic(3);">力导向图</button>
        <button onclick="show_pic(4);">清空画板</button>
    </div>
    <script type="text/javascript">
    var board = DragLine.CreateBoard($('body'));
    // board.setSize(600,550);
    // board.setBorder(0);
    DragLine.CreateMenu(board);

    // var inside = '<circle cx="55" cy="55" r="40" style="fill:none;" stroke="blue" stroke-width="2"/><rect width="30" height="16" x="0" y="47" rx="5" ry="5" fill="orange"/><text x="0" y="57" fill="#fff" style="font-size:12px">标签</text>';
    // var obj = board.createMoveObj(inside,100,100,'test');
    // obj.setSize(110,110);
    // obj.setFix(15,55);

    var data = {
        'father':{'id':'main','name':'张三'},
        'children':[
            {'id':'1_1','name':'名字','style':[1,2],'close':90},
            {'id':'1_2','name':'名字','style':[1],'close':90},
            {'id':'1_3','name':'名字','style':[1],'close':90},
            {'id':'1_4','name':'名字','style':[1],'close':90},
            {'id':'1_6','name':'名字','style':[2,3],'close':90},
            {'id':'1_7','name':'名字','style':[3,2,1],'close':90},
            {'id':'1_8','name':'名字','style':[2],'close':90},
            {'id':'1_9','name':'名字','style':[2],'close':90},
            {'id':'1_10','name':'名字','style':[3],'close':90},

            {'id':'2_1','name':'名字','style':[1],'close':80},
            {'id':'2_2','name':'名字','style':[1],'close':80},
            {'id':'2_3','name':'名字','style':[1],'close':80},
            {'id':'2_4','name':'名字','style':[1],'close':80},
            {'id':'2_5','name':'名字','style':[2],'close':80},
            {'id':'2_6','name':'名字','style':[2],'close':80},
            {'id':'2_7','name':'名字','style':[2],'close':80},
            {'id':'2_8','name':'名字','style':[2],'close':80},
            {'id':'2_9','name':'名字','style':[2],'close':80},
            {'id':'2_10','name':'名字','style':[2],'close':80},

            {'id':'3_1','name':'名字','style':[1],'close':50},
            {'id':'3_2','name':'名字','style':[1],'close':50},
            {'id':'3_3','name':'名字','style':[1],'close':50},
            {'id':'3_4','name':'名字','style':[1],'close':50},
            {'id':'3_5','name':'名字','style':[1],'close':50},
            {'id':'3_6','name':'名字','style':[1],'close':50},
            {'id':'3_7','name':'名字','style':[1],'close':50},
            {'id':'3_8','name':'名字','style':[1],'close':50},
            {'id':'3_9','name':'名字','style':[1],'close':50},
            {'id':'3_11','name':'名字','style':[3],'close':50},
            {'id':'3_12','name':'名字','style':[3],'close':50},
            {'id':'3_13','name':'名字','style':[2],'close':50},
            {'id':'3_14','name':'名字','style':[2],'close':50},
            {'id':'3_15','name':'名字','style':[2],'close':50},
            {'id':'3_16','name':'名字','style':[2],'close':50},
            {'id':'3_17','name':'名字','style':[2],'close':50},
            {'id':'3_29','name':'名字','style':[3],'close':50},
            {'id':'3_30','name':'名字','style':[3],'close':50},
            {'id':'3_31','name':'名字','style':[3],'close':50},
            {'id':'3_32','name':'名字','style':[3],'close':50},
            {'id':'3_33','name':'名字','style':[3],'close':50},

            {'id':'4_1','name':'名字','style':[1],'close':40},
            {'id':'4_2','name':'名字','style':[1],'close':40},
            {'id':'4_3','name':'名字','style':[1],'close':40},
            {'id':'4_4','name':'名字','style':[1],'close':40},
            {'id':'4_5','name':'名字','style':[1],'close':40},
            {'id':'4_6','name':'名字','style':[1],'close':40},
            {'id':'4_7','name':'名字','style':[1],'close':40},
            {'id':'4_8','name':'名字','style':[1],'close':40},
            {'id':'4_9','name':'名字','style':[2],'close':40},
            {'id':'4_10','name':'名字','style':[2],'close':40},
            {'id':'4_11','name':'名字','style':[2],'close':40},
            {'id':'4_12','name':'名字','style':[2],'close':40},
            {'id':'4_13','name':'名字','style':[3],'close':40},
            {'id':'4_14','name':'名字','style':[3],'close':40},
            {'id':'4_15','name':'名字','style':[3],'close':40},
            {'id':'4_16','name':'名字','style':[2],'close':40},
            {'id':'4_17','name':'名字','style':[2],'close':40},
            {'id':'4_18','name':'名字','style':[3],'close':40},
            {'id':'4_19','name':'名字','style':[3],'close':40},
        ]
    }
    var data2 = {
        'father':{'id':'main','name':'李四'},
        'children':[
            {'id':'1','name':'名字','style':1,'close':200},
            {'id':'2','name':'名字','style':1,'close':200},
            {'id':'11','name':'名字','style':1,'close':100},
            {'id':'12','name':'名字','style':1,'close':100},
            {'id':'13','name':'名字','style':1,'close':100},
            {'id':'14','name':'名字','style':1,'close':100},
            // {'id':'23','name':'名字','style':1,'close':80},
            // {'id':'24','name':'名字','style':1,'close':80},
            // {'id':'31','name':'名字','style':1,'close':80},
            // {'id':'32','name':'名字','style':2,'close':50},
            // {'id':'35','name':'名字','style':2,'close':50},
            // {'id':'39','name':'名字','style':2,'close':50},
        ]
    }

    function fuc(id){
        console.log('单机:',id);
    }
    function fuc2(id){
        console.log('双机:',id);
        board.clear();
        DragLine.LoadingInfo(board,data2);
    }
    board.setClickFuc(fuc,fuc2);

    function select(info){
        $('input[type="checkbox"]').change(function(){
            var min = $('input[name="min"]').val();
            var max = $('input[name="max"]').val();
            var styles = [];
            $('input[type="checkbox"]').each(function(){
                var is_checked = $(this).is(':checked');
                var val = $(this).val();
                if(is_checked){
                    styles.push(val);
                }
            })
            info.selectCommon(styles,min,max,0);
        })
        $('button').click(function(){
            var min = $('input[name="min"]').val();
            var max = $('input[name="max"]').val();
            var styles = [];
            $('input[type="checkbox"]').each(function(){
                var is_checked = $(this).is(':checked');
                var val = $(this).val();
                if(is_checked){
                    styles.push(val);
                }
            })
            info.selectCommon(styles,min,max,0);
        })
    }

    function show_pic(type){
        if(type==1){

            board.clear();
            var info = DragLine.LoadingInfo(board,data,3);
            select(info);
        }else if(type==2){
            board.clear();
            var info = DragLine.RandomInfo(board,data);
            select(info);
        }else if(type==3){
            board.clear();
            DragLine.ForceInfo(board,data2);
        }else{
            board.clear();
        }
    }


    </script>
</body>
</html>